<template>
  <div class="server-config-container">
    <div class="header">
      <div class="header-left" @click="action.back">
        <ChevronLeftIcon class="icon" /> 返回
      </div>
      <div class="header-center">
        <div class="title">服务器配置</div>
      </div>
    </div>

    <div class="content">
      <div class="description">
        <t-alert theme="info" title="关于服务器配置">
          <template #message>
            <p>在这里配置连接Face2Face和TTS服务的基础URL地址和端口号。</p>
            <p style="color: red">请注意！！修改成功后，需要重启软件。</p>
          </template>
        </t-alert>
      </div>

      <div class="config-form">
        <t-form
          ref="form"
          :data="formData"
          :rules="rules"
          @submit="action.saveConfig"
          layout="vertical"
        >
          <t-form-item label="服务器基础URL" name="baseUrl">
            <t-input v-model="formData.baseUrl" placeholder="例如：http://192.168.0.151">
              <template #suffix>
                <t-tooltip content="必须包含协议(http://或https://)和IP地址/域名">
                  <InfoCircleIcon />
                </t-tooltip>
              </template>
            </t-input>
          </t-form-item>

          <t-form-item label="服务器API端口URL" name="baseUrl">
            <t-input v-model="formData.baseUrlWithPort" placeholder="例如：http://192.168.0.151：2000">
              <template #suffix>
                <t-tooltip content="必须包含协议(http://或https://)和IP地址（加端口号）/域名">
                  <InfoCircleIcon />
                </t-tooltip>
              </template>
            </t-input>
          </t-form-item>

          <t-form-item label="Face2Face端口" name="face2facePort">
            <t-input v-model="formData.face2facePort" placeholder="例如：8383">
              <template #suffix>
                <t-tooltip content="Face2Face服务的端口号">
                  <InfoCircleIcon />
                </t-tooltip>
              </template>
            </t-input>
          </t-form-item>

          <t-form-item label="TTS端口" name="ttsPort">
            <t-input v-model="formData.ttsPort" placeholder="例如：18180">
              <template #suffix>
                <t-tooltip content="TTS服务的端口号">
                  <InfoCircleIcon />
                </t-tooltip>
              </template>
            </t-input>
          </t-form-item>

          <t-form-item label="混剪基础URL(可默认)" name="kpop_baseUrl">
            <t-input v-model="formData.kpop_baseUrl" placeholder="例如：http://192.168.0.151">
              <template #suffix>
                <t-tooltip content="必须包含协议(http://或https://)和IP地址/域名">
                  <InfoCircleIcon />
                </t-tooltip>
              </template>
            </t-input>
          </t-form-item>

          <t-divider></t-divider>

          <div class="config-summary">
            <h3>数字人服务地址预览</h3>
            <div class="service-url-preview">
              <div class="service-item">
                <div class="service-label">Face2Face服务:</div>
                <div class="service-value">{{ previewUrls.face2face }}</div>
              </div>
              <div class="service-item">
                <div class="service-label">TTS服务:</div>
                <div class="service-value">{{ previewUrls.tts }}</div>
              </div>
            </div>
            <h3>混剪地址预览</h3>
            <div class="service-url-preview">
              <div class="service-item">
                <div class="service-label">混剪基础URL:</div>
                <div class="service-value">{{ previewUrls.kpop_baseUrl }}</div>
              </div>
            </div>
          </div>

          <div class="form-footer">
            <t-space>
              <t-button theme="default" @click="action.reset">重置</t-button>
              <t-button theme="primary" type="submit" :loading="saveLoading">保存配置</t-button>
            </t-space>
          </div>
        </t-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import {
  ChevronLeftIcon,
  InfoCircleIcon
} from 'tdesign-icons-vue-next';
import { useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import {
  getServerConfig,
  updateServerConfig
} from '@renderer/api/ipAddresses';

const router = useRouter();
const saveLoading = ref(false);
const formData = reactive({
  baseUrl: 'http://192.168.0.151',
  baseUrlWithPort: 'http://192.168.0.151:2000',
  face2facePort: '8383',
  ttsPort: '18180',
  kpop_baseUrl: 'http://192.168.0.151'
});

// 表单验证规则
const rules = {
  baseUrl: [
    { required: true, message: '请输入服务器基础URL', trigger: 'blur' },
    {
      validator: (val) => {
        try {
          const url = new URL(val);
          return url.protocol === 'http:' || url.protocol === 'https:';
        } catch (e) {
          return false;
        }
      },
      message: '请输入有效的URL(以http://或https://开头)',
      trigger: 'blur'
    }
  ],
  kpop_baseUrl: [
    { required: true, message: '请输入服务器基础URL', trigger: 'blur' },
    {
      validator: (val) => {
        try {
          const url = new URL(val);
          return url.protocol === 'http:' || url.protocol === 'https:';
        } catch (e) {
          return false;
        }
      },
      message: '请输入有效的URL(以http://或https://开头)',
      trigger: 'blur'
    }
  ]
};

// 预览URL
const previewUrls = computed(() => {
  const baseUrl = formData.baseUrl || 'http://192.168.0.151';
  const baseUrlWithPort = formData.baseUrlWithPort || 'http://192.168.0.151:2000';
  const face2facePort = formData.face2facePort || '8383';
  const ttsPort = formData.ttsPort || '18180';
  const kpop_baseUrl = formData.kpop_baseUrl || 'http://192.168.0.151';

  return {
    face2face: `${baseUrl}:${face2facePort}/easy`,
    baseUrlWithPort: `${baseUrlWithPort}`,
    tts: `${baseUrl}:${ttsPort}`,
    kpop_baseUrl: kpop_baseUrl
  };
});

// 加载服务器配置
const loadConfig = async () => {
  try {
    const config = await getServerConfig();
    if (config) {
      if (config.base_url) {
        formData.baseUrl = config.base_url;
      }
      if (config.base_url_with_port) {
        formData.baseUrlWithPort = config.base_url_with_port;
      }
      if (config.face2face) { // 注意这里改成了face2face
        formData.face2facePort = config.face2face;
      }
      if (config.tts) { // 注意这里改成了tts
        formData.ttsPort = config.tts;
      }
      if (config.kpop_baseUrl) { // 注意这里改成了tts
        formData.kpop_baseUrl = config.kpop_baseUrl;
      }
    }
  } catch (error) {
    console.error('加载服务器配置失败:', error);
    MessagePlugin.error('加载服务器配置失败: ' + (error.message || '未知错误'));
  }
};

const action = {
  // 返回上一页
  back() {
    router.push("/home");
  },

  // 保存配置
  async saveConfig({ validateResult }) {
    if (validateResult === true) {
      saveLoading.value = true;
      try {
        // 这里改成了单独的参数，而不是对象
        await updateServerConfig(
          formData.baseUrl,
          formData.baseUrlWithPort,
          formData.face2facePort,
          formData.ttsPort,
          formData.kpop_baseUrl
        );
        MessagePlugin.success('服务器配置保存成功');
      } catch (error) {
        console.error('保存服务器配置失败:', error);
        MessagePlugin.error('保存服务器配置失败: ' + (error.message || '未知错误'));
      } finally {
        saveLoading.value = false;
      }
    }
  },

  // 重置为默认值
  reset() {
    formData.baseUrl = 'http://192.168.0.151';
    formData.baseUrlWithPort = 'http://192.168.0.151:2000';
    formData.face2facePort = '8383';
    formData.ttsPort = '18180';
    formData.kpop_baseUrl = 'http://192.168.0.151';
  }
};

onMounted(() => {
  loadConfig();
});
</script>

<style lang="less" scoped>
.server-config-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 23px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    background-color: #ffffff;  // 深色背景改为白色
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色

    &-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      gap: 6px;
      cursor: pointer;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色
      -webkit-app-region: no-drag;

      .icon {
        font-size: 20px;
      }
    }

    &-center {
      flex: 1;
      text-align: center;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;  // 白色文字改为深灰色
      }
    }
  }

  .content {
    flex: 1;
    padding: 20px;
    overflow: auto;

    .description {
      margin-bottom: 20px;

      :deep(.t-alert) {
        background-color: rgba(255, 119, 11, 0.1);  // 保留原有的警告色，但可能需要调整透明度
        border-color: rgba(255, 119, 11, 0.3);  // 保留原有的警告色边框
      }

      :deep(.t-alert__title) {
        color: #333333;  // 白色文字改为深灰色
      }

      :deep(.t-alert__message) {
        color: rgba(0, 0, 0, 0.7);  // 半透明白色改为半透明黑色
      }
    }

    .config-form {
      background-color: #f5f5f5;  // 深灰色背景改为浅灰色
      border-radius: 8px;
      padding: 24px;
      border: 1px solid #e0e0e0;  // 添加浅灰色边框，增强视觉层次

      :deep(.t-form__label) {
        color: #333333;  // 白色文字改为深灰色
      }

      :deep(.t-input__wrap){
        width: 100%;
        margin-left: 50px;
      }

      :deep(.t-input) {
        --td-bg-color-specialcomponent: #ffffff;  // 深色输入框背景改为白色
        --td-text-color-primary: #333333;  // 白色文字改为深灰色
        --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

        input {
          background-color: #ffffff;  // 深色输入框背景改为白色
          border-color: #e0e0e0;  // 深色边框改为浅灰色
          color: #333333;  // 白色文字改为深灰色

          &:hover, &:focus {
            border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
          }
        }

        &:focus-within {
          box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
        }
      }
    }

    .config-summary {
      margin-top: 24px;

      h3 {
        color: #333333;  // 白色文字改为深灰色
        margin-bottom: 16px;
      }

      .service-url-preview {
        background-color: #f5f5f5;  // 深色背景改为浅灰色
        padding: 16px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;  // 添加浅灰色边框

        .service-item {
          display: flex;
          margin-bottom: 12px;

          .service-label {
            width: 140px;
            color: rgba(0, 0, 0, 0.7);  // 半透明白色改为半透明黑色
          }

          .service-value {
            font-family: monospace;
            color: #333333;  // 白色文字改为深灰色
            background-color: rgba(0, 0, 0, 0.03);  // 添加轻微背景色，增强代码区分度
            padding: 2px 6px;
            border-radius: 3px;
          }
        }
      }
    }
  }
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
</style>
